<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue2.js"></script>
</head>
<body>

<div id="app">

<!--     注册在Vue原型上的组件  可以在vue的实例中直接通过组件标签使用-->
<!--    <student></student>-->
</div>

<script>

    /*
    *    定义全局组件
    *    1.第一个参数  表示定义的组件的名字
    *    2.第二个参数  表示组件对象
    * */
    Vue.component('student',{
        template:`
                <div>
                    <h3>{{title}}</h3>
                    <p>学生姓名:{{student.name}}</p>
                    <p>学生年龄:{{student.age}}</p>
                    <p>学生性别:{{student.sex}}</p>
               </div>
        `,
        data(){
            return {
                title:"学生信息展示",
                student:{
                    name:'tom',
                    age:20,
                    sex:"男"
                }
            }
        }
    })

    let vm = new Vue({
        el:'#app',
        template: `
          <student></student>
        `,
        data:{},
        methods:{}
      })
</script>

</body>
</html>